<template>
  <div class="g-page-container">
    <PageHeader title="失销分析" />
    <div class="g-content-container">
      <LostSearchForm ref="search-form" @search="loadTableList" />
      <div class="list-container">
        <p-tabs
          :animated="false"
          class="tabs-container"
          default-active-key="1"
          @change="tabsChange"
        >
          <p-tab-pane key="1" tab="失销原因">
            <LostReasonPie />
          </p-tab-pane>
          <p-tab-pane key="2" tab="失销阶段">
            2
          </p-tab-pane>
        </p-tabs>
      </div>
      <!-- <PriceChangeTableList
        :loading="loading"
        :data-source="totalData"
        :columns="columns"
        @change="handleTableChange"
        @number-click="handleNumberClick"
      /> -->
    </div>
  </div>
</template>

<script>
import LostSearchForm from './components/lostSearchForm.vue';
import LostReasonPie from './components/lostReasonPie.vue';
// import mixinTable from '@/mixins/mixin-table.js';
// import DialogRpRelationList from '@/components/dialog/DialogRpRelationList.vue';

import {
  postPriceParameterList,
  postExportPriceParameterDetail,
} from '@/api/price.js';
import monent from 'moment';
import { createMonthArray } from '@/utils/time';
import { downloadFile } from '@/utils/index.js';
import Decimal from 'decimal.js';

export default {
  components: {
    LostSearchForm,
    LostReasonPie
    // DialogRpRelationList,
  },
  // mixins: [mixinTable],
  data() {
    return {
      asc: true,
      loading: false,
      dataSource: [],
      visibleModal: false,
      formData: {},
      isDateChange: false,
      keyTabs: ''
    };
  },
  computed: {
    applicationState() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    shapeState() {
      return this.$store.state.dictionary.dict['shape'] || {};
    },
    productionPlaceSate() {
      return this.$store.state.dictionary.dict['production_place'] || {};
    },
  },
  created() {
    // this.loadTableList();
    this.$nextTick(() => {
      // this.getPriceParameterDataList();
    });
  },
  methods: {
    async tabsChange(key) {
      this.keyTabs = key;
      console.log(key);
    },
    currentDate() {
      this.formData.startTime = `${monent().format('YYYY-MM-DD')} 00:00:00`;
      this.formData.endTime = `${monent()
        .add(1, 'years')
        .subtract(1, 'months')
        .format('YYYY-MM-DD')} 00:00:00`;
    },

    async getPriceParameterDataList() {
      let data = this.$refs['search-form']?.getSearchParams;
      this.loading = true;
      try {
        let start = `${monent().format('YYYY-MM-DD')} 00:00:00`;
        let end = `${monent()
          .add(1, 'years')
          .subtract(1, 'months')
          .format('YYYY-MM-DD')} 00:00:00`;
        const res = await postPriceParameterList({
          ...data,
          startTime: start,
          endTime: end,
        });
        let dataList = res?.data?.data;
        this.exportData = dataList;
        this.dataSource = this.proessData(dataList) || [];
        this.loading = false;
      } catch (err) {
        console.log(err, 'err');
        this.loading = false;
      }
    },

    getSearchForm() {
      const form = this.$refs['search-form']?.getSearchParams || {};
      let { startTime, endTime } = form;
      form.startTime = startTime
        ? `${monent(startTime).format('YYYY-MM-DD')} 00:00:00`
        : '';
      form.endTime = endTime
        ? `${monent(endTime).format('YYYY-MM-DD')} 00:00:00`
        : '';
      return { ...form };
    },
    async loadTableList() {
      let formDate = this.getSearchForm();
      // 校验时间是否只输入一个
      if (!formDate.startTime && formDate.endTime) {
        this.$message.error('请选择开始时间');
        return;
      }
      if (formDate.startTime && !formDate.endTime) {
        this.$message.error('请选择结束时间');
        return;
      }
      this.formData = formDate;
      this.loading = true;
      try {
        const result = await postPriceParameterList(this.formData);
        this.loading = false;
        this.exportData = result?.data?.data;
        this.dataSource = this.proessData(result?.data?.data);
        this.loading = false;
      } catch (err) {
        console.log(err);
        this.loading = false;
      }
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      // this.columnKey = sorter.columnKey;
      // this.paginationMixin = page;
      // this.loadTableList();
    },
    async exportCallback() {
      const data = JSON.parse(JSON.stringify(this.exportData));
      const res = await postExportPriceParameterDetail([...data]);
      await downloadFile(res.data, res.filename || '价格台账明细.xls');
    },
  },
};
</script>

<style lang="less" scoped>
.table-container {
  padding: 15px 20px;
  height: calc(100vh - 160px);
  box-sizing: border-box;
}
.list-container {
  height: calc(100% - 110px);
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  /deep/.poros-tabs-nav .poros-tabs-tab {
    margin: 0;
    padding: 12px 32px 12px 0;
  }
  /deep/ .poros-tabs-nav .poros-tabs-tab-active {
    color: #1740dc;
  }
  /deep/.poros-tabs-ink-bar {
    width: 48px !important;
  }
}
</style>
